<template>
  <div class="list-view-item" @click="triggerItem()">
    <div class="top">
      <div class="l">
        <div></div>
        <div class="title">
          <EllipsisTooltip :text="title"></EllipsisTooltip>
        </div>
      </div>
      <div class="r">
        <div class="extra">{{extra}}</div>
        <div class="icon" v-show="iconShow"><i class="iconfont icon-right"></i></div>
      </div>
    </div>
    <slot name="content"></slot>
  </div>
</template>
<script>
import EllipsisTooltip from './EllipsisTooltip'
export default {
  /**
   * 单个连续模块垂直排列列表组件
   */
  name: 'ListViewItem',
  props: {
    // 左边缩略图(当为 string 类型时作为 img src)
    thumb: {
      type: String,
      default: null
    },
    // 左边内容
    title: {
      type: String,
      default: ''
    },
    // 右边内容
    extra: {
      type: String,
      default: ''
    },
    // 是否显示右边icon
    iconShow: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  components: {EllipsisTooltip},
  created () {
  },
  methods: {
    triggerItem () {
      this.$emit('triggerItem')
    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
.list-view-item {
  padding: 0px 20px;
  .top {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-direction: row;
    flex-wrap: none; // 不允许换行
    justify-content: space-between;
    .l {
      height: 40px;
      line-height: 40px;
      // ellipsis
      max-height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      /*! autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      -webkit-line-clamp: 1;
    }
    .r {
      height: 40px;
      line-height: 40px;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-direction: row;
      flex-wrap: none;
      justify-content: space-between;
      .extra {
        display: inline-block;
      }
      .icon {
        display: inline-block;
      }
    }
  }
}
.list-view-item:hover {
  cursor: pointer;
  background-color: #eee;
}
</style>
